var vue = new Vue ({
    el: '#app',
    data: {
        nav_list: ['A-B','C-D','E-F','G-H','I-J','K-L','M-N','O-P','Q-R','S-T','U-V','W-X','Y-Z'],
        selected: 'A-B',
        page: 1,
        queryString: '',
        products: {
            recordsTotal: 0,
            recordsFiltered: 0,
            totalPage: 1,
            data: [{
                col_1_name: '',
                col_2_name: '',
                col_3_name: '',
                col_1_item_num: '',
                col_2_item_num: '',
                col_3_item_num: '',
            },]
        }
    },
    methods: {
        getProducts: function (item,page) {
            this.selected = item;
            this.page = page;
            axios.get('/api/products_search',{
                params:{
                    nav: item,
                    page: page,
                    query: this.queryString
                }
            }).then(response => {
                this.products = response.data;
            })
        },
        nextPage: function () {
            let page = this.page;
            page = page + 1;
            if (page <= this.products.totalPage) {
                this.page = page;
                axios.get('/api/products_search',{
                params:{
                    nav: this.selected,
                    page: page,
                    query: this.queryString
                }
                }).then(response => {
                    this.products = response.data;
                })
            }
        },
        prePage: function () {
            let page = this.page;
            page = page - 1;
            if (page > 0 ) {
                this.page = page;
                axios.get('/api/products_search',{
                params:{
                    nav: this.selected,
                    page: page,
                    query: this.queryString
                }
                }).then(response => {
                    this.products = response.data;
                })
            }
        },
        searchProducts: function () {
            axios.get('/api/products_search',{
                params:{
                    nav: this.selected,
                    page: 1,
                    query: this.queryString
                }
            }).then(response => {
                this.products = response.data;
            })
        }
    },
    mounted () {
        this.getProducts("A-B",1);
    }
});